<html>

	<head>
		<title>产品动态</title>
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<meta name="author" content="smalant.xue">
		<meta name="description" content="Haier biz ac production description">
		<meta charset="UTF-8">
		<!--<link rel="stylesheet" type="text/css" href="mystyle.css">-->
		
		<style type="text/css">
			body,
			div,
			span,
			object,
			iframe,
			h1,
			h2,
			h3,
			h4,
			h5,
			h6,
			p,
			blockquote,
			a,
			code,
			em,
			img,
			q,
			small,
			strong,
			dd,
			dl,
			dt,
			li,
			ol,
			ul,
			fieldset,
			form,
			label,
			table,
			tbody,
			tr,
			th,
			td,
			input {
				margin: 0;
				padding: 0;
				border: 0;
			}
			
			body {
				max-width: 1080px;
				margin: 0 auto;
				padding-top: 0.4rem;
				background: #F0F0F0;
				font-family: 'STHeiti', 'Microsoft YaHei', Helvetica, Arial, sans-serif;
				-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
			}
			
			a,
			a:active,
			a:hover,
			a:focus,
			a:visited {
				text-decoration: none;
			}
			
			article,
			aside,
			footer,
			header,
			hgroup,
			main,
			nav {
				display: block;
			}
			
			.m_article {
				font-size: .24rem;
				padding: .2rem 0;
				border-bottom: 1px solid #e5e5e5;
				margin: 0.4rem;
				background: #FFFFFF;
				border-radius: .6rem;
				display: block;
			}
			
			.m_article .m_article_img {
				float: left;
				width: 10rem;
				height: 10rem;
				overflow: hidden;
				position: relative;
				margin-right: .2rem;
			}
			
			.m_article .m_article_img img {
				width: 100%;
				display: block;
				min-height: 1.4rem;
				/*background-size: contain;*/
			}
			
			.m_article .m_article_info {
				overflow: hidden;
				padding-bottom: 0.2rem;
				min-height: 10.4rem;
			}
			/*List item title*/
			
			.m_article .m_article_info .m_article_title {
				font-size: 1.34rem;
				margin-bottom: .2rem;
				margin-top: 1.5rem;
				color: #212121;
				line-height: 1.42rem;
				/*width: 100%;*/
				display: -webkit-box;
				-webkit-line-clamp: 2;
				overflow: hidden;
				-webkit-line-break: auto;
				-webkit-box-orient: vertical;
			}
			
			.m_article .m_article_label span {
				color: white;
				font-size: .8rem;
				width: 2.5rem;
				text-align: center;
				line-height: 1.7rem;
				margin-top: .8rem;
				margin-right: .1rem;
				display: inline-block;
			}
			
			.m_article_label .green {
				background-color: #23b123
			}
			
			.m_article_label .blue {
				background-color: #0b6ea7
			}
			
			.m_article_label .cyan {
				background-color: #6dc2db
			}
			
			.m_article_desp {
				color: #757575;
				font-size: .9rem;
				line-height: 1.2rem;
			}
			
			.box-shadow-3 {
				-webkit-box-shadow: 0 0 10px rgba(210, 210, 210, .5);
				-moz-box-shadow: 0 0 10px rgba(210, 210, 210, .5);
				box-shadow: 0 0 10px rgba(210, 210, 210, .5);
			}
			
			.m_usage_range {
				display: block;
				color: #BDBDBD;
				font-size: .9rem;
				line-height: 1.2rem;
				margin-left: 1.1rem;
				margin-top: .8rem;
				margin-bottom: .4rem;
			}
		</style>

	</head>

	<body>
		<div class="content-list">
			<section class="m_article box-shadow-3">
				<a target="_black" href="#" class="cxf_a" data-url="index1.html" data-title="模块化磁悬浮">
					<div class="m_article_img"> <img src="img/ic_cxf_mkh.png " /></div>
					<div class="m_article_info">
						<div class="m_article_title"><span>模块化磁悬浮</span></div>
						<div class="m_article_label">
							<span class="green">节能</span>
							<span class="blue">高效</span>
							<span class="cyan">方便</span>
						</div>
						<div class="m_article_desp" style="margin-top:13px">
							<span>高效节能 <br/>尺寸更小 重量更轻<br/>缩短组装周期<br/>降低改造费用</span>
						</div>

					</div>
					<div class="m_usage_range">适用范围：政府公建、城市综合体、工业生产、轨道交通、酒店行业、商业办公<br/>适用面积：3500㎡</div>

				</a>
			</section>
			<section class="m_article box-shadow-3">
				<a target="_black" href="#" class="cxf_a" data-url="index2.html" data-title="水冷磁悬浮">
					<div class="m_article_img"> <img src="img/ic_cxf_sl.png " /></div>
					<div class="m_article_info">
						<div class="m_article_title"><span>水冷磁悬浮</span></div>
						<div class="m_article_label">
							<span class="green">节能</span>
							<span class="blue">舒适</span>
							<span class="cyan">稳定</span>
						</div>
						<div class="m_article_desp" style="margin-top:13px">
							<span>模块化自由组合 安装方便 <br/>全优设计 高效节能<br/>卓越性能－智能控制<br/>卓越性能－运行可靠</span>
						</div>

					</div>
					<div class="m_usage_range">适用范围：城市综合体、工厂车间、宾馆酒店、办公楼、轨道交通等 <br/>适用面积：3000㎡~</div>

				</a>
			</section>

			<section class="m_article box-shadow-3">
				<a target="_black" href="#" class="cxf_a" data-url="index3.html" data-title="水地源热泵磁悬浮">
					<div class="m_article_img"> <img src="img/ic_cxf_sl.png " /></div>
					<div class="m_article_info">
						<div class="m_article_title"><span>水地源热泵磁悬浮</span></div>
						<div class="m_article_label">
							<span class="green">节能</span>
							<span class="blue">舒适</span>
							<span class="cyan">稳定</span>
						</div>
						<div class="m_article_desp" style="margin-top:13px">
							<span>热泵磁悬浮压缩机，稳定可靠，噪音低 <br/>自由式容量调节<br/>高效无摩擦<br/>智能抗喘振</span>
						</div>

					</div>
					<div class="m_usage_range">适用范围：城市综合体、工厂车间、宾馆酒店、办公楼、轨道交通等 <br/>适用面积：5000㎡~</div>

				</a>
			</section>

			<section class="m_article box-shadow-3">
				<a target="_black" href="#" class="cxf_a" data-url="index4.html" data-title="水地源热泵磁悬浮">
					<div class="m_article_img"> <img src="img/ic_cxf_fl.png " /></div>
					<div class="m_article_info">
						<div class="m_article_title"><span>风冷磁悬浮</span></div>
						<div class="m_article_label">
							<span class="green">节能</span>
							<span class="blue">舒适</span>
							<span class="cyan">稳定</span>
						</div>
						<div class="m_article_desp" style="margin-top:13px">
							<span>节能高效 低运行费用 <br/>稳定可靠 低维保费用<br/>安装简便 低配电费用<br/>高舒适性 控温精准</span>
						</div>

					</div>
					<div class="m_usage_range">适用范围：政府公建、城市综合体、工业... <br/>适用面积：3000㎡</div>

				</a>
			</section>

		</div>
		
		<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
		<script type="text/javascript">
			var browser = navigator.appName;
			var ua = navigator.userAgent.toLowerCase();
//			alert("浏览器版本：" + ua);
			//android
			function showDetail(url, title) {
				window.jsObj.loadDetail(url, title);
			}
			$(document).ready(function() {
				$(".cxf_a").click(function() {
					if (ua.indexOf("android") != -1) {
						url = $(this).data('url');
						title = $(this).data('title');
						showDetail(url, title);
					}
					//					alert(url+title);
				});
			});
			//ios
			window.onerror = function(err) {
				log('window.onerror: ' + err);
			};

			function connectWebViewJavascriptBridge(callback) {
				if (window.WebViewJavascriptBridge) {
					//					alert(233333);
					callback(WebViewJavascriptBridge);
				} else {
					//					alert('12111111');
					document.addEventListener('WebViewJavascriptBridgeReady', function() {
						//						alert('ssss');
						callback(WebViewJavascriptBridge);
					}, false);
				}
			}
			connectWebViewJavascriptBridge(function(bridge) {
				var uniqueId = 1;
				//从OC获取数据 并定义一些数据回传给OC
				//				alert(12);
				bridge.init(function(message, responseCallback) {
					log('JS got a message from alaric', message);
					var data = {
						'Responds': 'Wee!'
					};
					log('JS responding with', data);
					alert(23);
					responseCallback(data); //定义一些数据回传给OC
				});
				//定义一个方法，以便OC来调用
				bridge.registerHandler('testJavascriptHandler', function(data, responseCallback) {
					log('ObjC called testJavascriptHandler with', data);
					var responseData = {
						'Javascript Says': 'Right back atcha!'
					};
					log('JS responding with', responseData);
					responseCallback(responseData); //给OC回传数据
					console.log(data);
				});
				$(document).ready(function() {
					$('.cxf_a').click(function() {
						alert(123);
						//e.preventDefault();
						url = $(this).data('url');
						title = $(this).data('title');
						var data = {
							'callback': 'chanpindongtai',
							params: {
								'url': url,
								'title': title,
							}
						};
						bridge.send(data, function(responseData) { //主动向OC发送数据
							//location.reload();
							//alert(responseData);
							//alert(111);
						});
					});
				});
			});
		</script>
	</body>

</html>